<template>
  <div id="app">
    <el-container style="height: 100vh;">
      <!-- 左侧项目列表 -->
      <el-aside width="250px" style="background-color: #f5f5f5; border-right: 1px solid #eee;">
        <project-list 
          ref="projectList"
          @select-project="handleProjectSelect">
        </project-list>
      </el-aside>

      <!-- 右侧工作区 -->
      <el-main>
        <div v-if="currentProject">
          <div class="workspace-header">
            <h2 class="project-title">{{ currentProject.name }}</h2>
            <div class="action-buttons">
              <el-button-group>
                <el-tooltip content="重命名" placement="top">
                  <el-button
                    size="mini"
                    icon="el-icon-edit"
                    @click="showRenameDialog = true">
                  </el-button>
                </el-tooltip>
                <el-tooltip content="删除项目" placement="top">
                  <el-button
                    size="mini"
                    icon="el-icon-delete"
                    style="color: #f56c6c"
                    @click="confirmDelete">
                  </el-button>
                </el-tooltip>
              </el-button-group>
            </div>
          </div>
          
          <doc-manager :project-id="currentProject.id"></doc-manager>
          
          <!-- 重命名弹框 -->
          <el-dialog title="重命名项目" :visible.sync="showRenameDialog" width="400px">
            <el-form :model="renameForm">
              <el-form-item label="新名称">
                <el-input v-model="renameForm.name" autofocus></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer">
              <el-button @click="showRenameDialog = false">取消</el-button>
              <el-button type="primary" @click="handleRename">确定</el-button>
            </span>
          </el-dialog>
        </div>
        <div v-else style="text-align: center; margin-top: 100px;">
          <el-empty description="请从左侧选择一个项目"></el-empty>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ProjectList from './components/ProjectList.vue'
import DocManager from './components/DocManager.vue'

export default {
  components: { ProjectList, DocManager },
  data() {
    return {
      currentProject: null,
      showRenameDialog: false,
      renameForm: {
        name: ''
      }
    }
  },
  methods: {
    handleProjectSelect(project) {
      this.currentProject = project
      // 强制重新加载DocManager组件
      this.$nextTick(() => {
        this.$refs.docManager && this.$refs.docManager.loadData()
      })
    },
    
    confirmDelete() {
      this.$confirm(`确定删除项目 "${this.currentProject.name}" 吗？`, '警告', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$refs.projectList.deleteProject(this.currentProject.id)
        this.currentProject = null
        this.$message.success('项目已删除')
      }).catch(() => {
        this.$message.info('删除已取消')
      })
    },
    
    handleRename() {
      if (!this.renameForm.name.trim()) {
        this.$message.warning('项目名称不能为空')
        return
      }
      
      this.$refs.projectList.renameProject({
        id: this.currentProject.id,
        name: this.renameForm.name.trim()
      })
      
      this.currentProject.name = this.renameForm.name.trim()
      this.showRenameDialog = false
      this.$message.success('重命名成功')
    }
  },
  watch: {
    showRenameDialog(val) {
      if (val) {
        this.renameForm.name = this.currentProject.name
      } else {
        this.renameForm.name = ''
      }
    }
  }
}
</script>

<style scoped>
/* 工作区头部样式 */
.workspace-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

/* 项目标题样式 */
.project-title {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

/* 操作按钮组样式 */
.action-buttons {
  display: flex;
  align-items: center;
}

/* 按钮组内部按钮样式 */
.el-button-group .el-button {
  margin-left: 0;
  border-radius: 0;
}

.el-button-group .el-button:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.el-button-group .el-button:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* 删除按钮悬停效果 */
.el-button[style*="color: #f56c6c"]:hover {
  background-color: rgba(245, 108, 108, 0.1);
}

/* 编辑按钮悬停效果 */
.el-button:not([style*="color: #f56c6c"]):hover {
  background-color: rgba(64, 158, 255, 0.1);
}
</style>

<style>
/* 全局样式调整 */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}
</style>